<template>
  <div class="StaffinfoListCom">
    <jxtech-page-table ref='PageTableRef' row-key='' :table-column='StaffinfoListComState.tableColumn' :load-data='StaffinfoListComState.loadData'
                       :exp-data='StaffinfoListComState.expData' fit='full' @selection-change="StaffinfoListComState.tableSelectionChange">
      <template #header>
        <div class="jxtech-page-table-header-flex">
          <jxtech-search-form :query-column="StaffinfoListComState.queryColumn" :query-form="StaffinfoListComState.queryParam" :col-span="6"
                              @handle-search="StaffinfoListComState.handleSearch">

          </jxtech-search-form>
        </div>
      </template>

      <template #orgNameSlot="{ row }">
        <el-tooltip class="item" effect="dark" :content="row.orgName" placement="top">
          <div class="descriptiontext">{{row.orgName}}</div>
        </el-tooltip>
      </template>
      <template #postMridSlot="{ row }">
        <el-tooltip class="item" effect="dark" :content="row.postMrid" placement="top">
          <div class="descriptiontext">{{row.postMrid}}</div>
        </el-tooltip>
      </template>
      <template #takeOfficeDateSlot="{ row }">
        {{row.takeOfficeDate.split(' ')[0]}}
      </template>
      <template #joinGroupDateSlot="{ row }">
        {{row.joinGroupDate.split(' ')[0]}}
      </template>
    </jxtech-page-table>
  </div>
</template>

<script lang="ts" setup>
import { getPersonInfoServiceApi } from "/@/api/personnel/bean/staffinfo"
import { reactive, ref, onMounted } from "vue"
import { ElNotification, ElMessageBox, ElMessage } from "element-plus"
const props = defineProps({
  ParentQueryParam: Object
})
const PageTableRef = ref()
const StaffinfoListComState = reactive({
  handleSearch: () => PageTableRef.value.loadTable(),
  queryColumn: [
    {
      name: "psnName",
      type: "input",
      label: "姓名",
      placeholder: "请输入姓名"
    },
    {
      name: "mobile",
      type: "input",
      label: "手机电话",
      placeholder: "请输入手机电话"
    }
  ],
  queryParam: { likeAll: null },
  /**
   * 表格选中的数据
   */
  selectionData: [] as any[],
  tableColumn: [
    { label: "序号", width: "50", type: "selection" },
    { label: "序号", width: "50", type: "index" },
    {
      prop: "orgName",
      label: "机构",
      slot: "orgNameSlot",
      width: "150"
    },
    { prop: "psnName", label: "姓名" },
    { prop: "性别", label: "性别" },
    { prop: "age", label: "年龄" },
    {
      prop: "postMrid",
      label: "岗位",
      slot: "postMridSlot",
      width: "150"
    },
    { prop: "政治面貌", label: "政治面貌" },
    { prop: "partisanParticipateDate", label: "入党(其他)时间", width: "200" },
    { prop: "人员类别", label: "人员类别" },
    { prop: "eMail", label: "邮箱", width: "120" },
    { prop: "officePhone", label: "办公电话", width: "110" },
    { prop: "mobile", label: "手机电话", width: "100" },
    // { prop: "createPersonName", label: "员工状况" },
    { prop: "cadresPostName", label: "职务" },
    { prop: "cadresPostLevelCod", label: "职级" },
    { prop: "titletechpost", label: "技术职称" },
    {
      prop: "takeOfficeDate",
      label: "任职日期",
      slot: "takeOfficeDateSlot",
      width: "120"
    },
    // { prop: "createPersonName", label: "统一认证" },
    {
      prop: "joinGroupDate",
      label: "入司日期",
      slot: "joinGroupDateSlot",
      width: "120"
    }
    // { prop: "createPersonName", label: "组织路径" }
  ],
  loadData: (params: any) => {
    return getPersonInfoServiceApi.pageQueryPersonInfo(
      {
        ...params,
        ...StaffinfoListComState.queryParam,
        ...props.ParentQueryParam
      },

      { refCols: "default" }
    )
  },
  expData: (params: any) => {
    return getPersonInfoServiceApi.exportData(null, {
      ...params,
      ...StaffinfoListComState.queryParam
    })
  },
  tableSelectionChange: (dataList: any[]) => {
    StaffinfoListComState.selectionData = dataList
  },
  multideletehandler() {
    if (!StaffinfoListComState.selectionData.length) {
      return ElNotification({
        title: "错误",
        message: "没有选择任何数据",
        type: "error"
      })
    }

    ElMessageBox.confirm("您确定要删除选择的数据么?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        const idsarray: string[] = []
        StaffinfoListComState.selectionData.forEach(item => {
          idsarray.push(item.mrCode)
        })
        getPersonInfoServiceApi
          .saveMultiDelete(idsarray, null)
          .then(response => {
            ElNotification({
              title: "删除成功",
              message: "mrCode-" + idsarray,
              type: "success"
            })
            PageTableRef.value.loadTable()
          })
      })
      .catch(() => {
        // ElMessage({
        //   type: 'info',
        //   message: 'Delete canceled',
        // })
      })
  }
})
onMounted(() => {})
defineExpose({
  GetStaffInfoListTableRef: () => PageTableRef.value,
  exposemultideletehandler: () => StaffinfoListComState.multideletehandler()
})
</script>

<style lang="scss" scoped>
.descriptiontext {
  cursor: pointer;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
</style>
